<template>
    <div class="back">
        <div class="content">
            <table class="list">
                <tr v-for="i in 9" :key="i">
                    <td v-for="i in 9" :key="i"></td>
                </tr>
            </table>
        </div>
        <div class="piece">
            <table class="list">
                <tr v-for="(item,i) in bangArr" :key="i">
                    <td v-for="(value,index) in item" :key="index" :class="[value===1?'black':'',value===0?'white':'']"
                        @click="dropBang(i,index)"></td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
    import {websocketsend,sendWebsocket} from "@/uitls/websocket.js"
    export default {
        name: "GoBang",
        created() {
            sendWebsocket(this.wsMessage);
            this.wsSend();
        },
        data: function () {
            return {
                bangArr: [
                ],
                lock:true,
                current: 0
            }
        },
        computed: {

        },
        methods: {
            wsMessage(redata){
                console.log("消息接收",redata);
                let message_type=redata.message_type;
                let content=redata.content;
                let parse = JSON.parse(content);
                switch (message_type) {
                    case 10006:
                        this.lock=parse.lock;
                        this.bangArr=parse.content;
                        var x = parse.x;
                        var y = parse.y;
                        var color = parse.color;
                        this.winAlgorithm(y,x,color);
                        break;
                    case 10009://获胜通知
                        this.$message.success(parse.content)
                        break;
                    case 20002:
                        this.$message.error(parse.content);
                        break;
                    case 20003:
                        this.$message.error(parse.content);
                        break;
                    default:
                }
               // this.winAlgorithm(i, index);
            },
            wsSend(){
                let name = localStorage.getItem("name");
                let roomId = localStorage.getItem("room_id");
                if (roomId==="0"){
                    this.$message.error("房间号出现异常");
                }
                let data={
                    "message_type":10005,//开始对局，开始渲染棋盘
                    "content":roomId,//传入房间号
                    "sender" :name,
                };
                websocketsend(data);
            },
            dropBang(i, index) {
                var that = this;
                if (that.bangArr[i][index] !== -1) {
                    alert("当前位置已有棋子");
                    return
                }

                let name = localStorage.getItem("name");
                let roomId = localStorage.getItem("room_id");
                if (roomId==="0"){
                    this.$message.error("房间号出现异常");
                }
                let content = {
                    "room_id":Number(roomId),
                    "x":i,
                    "y":index
                };
                let data={
                    "message_type":10007,//开始对局，开始渲染棋盘
                    "content":JSON.stringify(content),
                    "sender" :name,
                };
                websocketsend(data);
            },
            //计算胜负
            winAlgorithm(y,x,color) {
                if (x===0||y===0){
                    return
                }
                let name = localStorage.getItem("name");
                let content = {
                    "color":color,
                    "x":x,
                    "y":y
                };
                let data={
                    "message_type":10008,//落子计算胜负
                    "content":JSON.stringify(content),
                    "sender" :name,
                };
                websocketsend(data);
            },
        }
    }
</script>

<style scoped>
    .back {
        height: 90vh;
        position: relative;
    }

    .content {
        border: 1px solid #000;
        padding: 20px;
        background-color: #f6b950;
        border-radius: 10px;
        position: fixed;
        top: 50%; /*偏移*/
        left: 50%;
        transform: translate(-50%, -50%);
        display: inline-block;
        box-shadow: #2c3e50;


    }

    .piece {
        border: 20px solid #f6b950;
        border-radius: 10px;
        position: fixed;
        top: 50%; /*偏移*/
        left: 50%;
        transform: translate(-50%, -50%);
        display: inline-block;
        /* background-color: transparent;*/
        z-index: 1000;
    }

    .list {
        border-collapse: separate;
        border-spacing: unset;
        /*box-sizing: content-box;
        width: 100%;
        height: 100%;*/
    }

    .list tr, .list td {
        border: 1px solid #2c3e50;
    }

    .list td {
        width: 30px;
        height: 30px;
    }

    .piece td {
        border-radius: 50%;
    }

    .piece > .list td {
        background-color: #fff;
        opacity: 0;
        filter: Alpha(opacity=100)
    }

    .piece > .list td.black {
        opacity: 1;
        background-color: #000;
        filter: Alpha(opacity=100);
        border: unset;
    }

    .piece > .list td.white {
        opacity: 1;
        filter: Alpha(opacity=100);
        border: unset;
    }
</style>